// ==UserScript==
// @name ChatGPT撑开页面宽度
// @namespace https://greasyfork.org/
// @version 1.0.2
// @description 将页面宽度展开
// @author OpenAI - ChatGPT
// @match https://chat.openai.com/
// @match https://chat.openai.com/c/*
// @match https://chat.openai.com/?*
// @license await
// ==/UserScript==
(function () {
"use strict";
const newMaxWidth = "90rem";
const targetClassName = ".xl\\:max-w-3xl";
const targetClass = "flex flex-col text-sm dark:bg-gray-800";
const desiredMinWidth = 1280;
// function checkAndModifyStyle() {
// var elements = document.querySelectorAll(targetClassName);
// elements.forEach(function (element) {
// editStyle(element);
// });
// }
function btnClick() {
const toggleButton = document.querySelector("nav");
if (!toggleButton) {
btnClick();
return;
}
//toggleButton添加一个元素,位置在 窗口宽度小于1280时,右上角的按钮 top10px left10px
//提示内容为:请点击此按钮,以展开页面宽度 如果页面未展开,请重新点击此按钮 提示内容十秒后自动消失
toggleButton.insertAdjacentHTML(
"beforeend",
'
如果页面宽度未展开,请重新点击此树结构导航栏
或者直接点击我
提示内容十秒后自动消失
'
);
const btn = document.getElementById("btnClick");
btn.addEventListener("click", function () {
checkObserver();
});
setTimeout(function () {
btn.remove();
}, 10000);
if (toggleButton) {
toggleButton.addEventListener("click", function () {
setTimeout(function () {
checkObserver();
}, 1000);
});
}
}
function checkObserver() {
var elementForm = document.querySelectorAll("form");
elementForm.forEach(function (element) {
if (element.className.indexOf("xl:max-w-3xl") > -1) {
editStyle(element);
}
});
var parentElement = document.getElementsByClassName(targetClass)[0]; // 替换为实际的父元素ID或选择器
//获取元素本身的子元素
parentElement.querySelectorAll(targetClassName).forEach(function (flexDiv) {
editStyle(flexDiv);
});
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
mutation.addedNodes.forEach(function (addedNode) {
var flexDivs = addedNode.querySelectorAll(targetClassName);
flexDivs.forEach(function (flexDiv) {
editStyle(flexDiv);
});
});
});
});
var config = { childList: true, subtree: true };
observer.observe(parentElement, config);
}
function editStyle(el) {
el.style.transition = "max-width 1s";
setTimeout(function () {
el.style.transition = "";
}, 1000);
el.style.maxWidth = newMaxWidth;
}
window.addEventListener("resize", checkObserver);
window.onload = function () {
if (window.innerWidth < desiredMinWidth) {
return;
}
btnClick();
// checkAndModifyStyle();
setTimeout(function () {
checkObserver();
}, 2000);
};
})();